import React from "react";
import {ScrollView, View, Text, Image, StyleSheet, Dimensions, TouchableHighlight, processColor} from "react-native";
import {BarChart} from 'react-native-charts-wrapper';
import {PieChart} from 'react-native-charts-wrapper';
import Carousel from './Carousel';

let winWidth = Dimensions.get('window').width;

export default class Main extends React.Component {
    static navigationOptions = {
        header: null
    };
    constructor() {
        super();

        this.state = {
            //柱状图
            legend: {
                enabled: false,
                textSize: 14,
                form: 'SQUARE',
                formSize: 14,
                xEntrySpace: 10,
                yEntrySpace: 5,
                formToTextSpace: 5,
                wordWrapEnabled: true,
                maxSizePercent: 0.5
            },
            data: {
                dataSets: [{
                    values: [{y: 320.23}, {y: 231}, {y: 90}, {y: 70}],
                    label: '',
                    config: {
                        // color: processColor('teal'),
                        colors: [processColor('#F29400'), processColor('#0268AE'), processColor('#FFD500'), processColor('#DF4443')],
                        // barSpacePercent: 40,
                        // barShadowColor: processColor('lightgrey'),
                        // highlightAlpha: 70,
                        // highlightColor: processColor('red'),
                        entryLabelTextSize: 16,
                    }
                }],
            },
            xAxis: {
                valueFormatter: ['能量', '水', '电', '气'],
                labelCount:4,
                granularityEnabled: false,
                granularity: 1,
                position: 'BOTTOM',
                drawGridLines: false
            },
            yAxis: {
                right: {
                    drawLabels: false,
                    drawAxisLine: false,
                    drawGridLines: false,
                }
            },
            description: {
                text: '',
            },
            nengliang:{
                width:20,
                height:10,
                font:11,
                color:'gray'
            },
            shui:{
                width:20,
                height:10,
                font:11,
                color:'gray'
            },
            dian:{
                width:20,
                height:10,
                font:11,
                color:'gray'
            },
            qi:{
                width:20,
                height:10,
                font:11,
                color:'gray'
            },
            //饼状图
            pieLegend: {
                enabled: false,
                textSize: 8,
                form: 'CIRCLE',
                position: 'RIGHT_OF_CHART',
                wordWrapEnabled: true
            },
            pieData: {
                dataSets: [{
                    values: [
                        {value: 865.68, label: 'nengliang'},
                        {value: 280, label: 'shui'},
                        {value: 420, label: 'dian'},
                        {value: 300, label: 'qi'}],
                    label: '',
                    config: {
                        colors: [processColor('#F29400'), processColor('#0268AE'), processColor('#FFD500'), processColor('#DF4443')],
                        valueTextSize: 16,
                        valueTextColor: processColor('white'),
                        sliceSpace: 0,
                        selectionShift: 10
                    }
                }],
            },
            pieDescription: {
                text: '',
                textSize: 15,
                textColor: processColor('darkgray'),
            },
            pieNengliang:{
                width:15,
                height:15,
                font:11,
                color:'gray'
            },
            pieShui:{
                width:15,
                height:15,
                font:11,
                color:'gray'
            },
            pieDian:{
                width:15,
                height:15,
                font:11,
                color:'gray'
            },
            pieQi:{
                width:15,
                height:15,
                font:11,
                color:'gray'
            }
        };
        //this.handleSelect = this.handleSelect.bind(this);
    }

    handleSelect(event) {
        let entry = event.nativeEvent;
        if(entry.x == 0){
            this.setState({
                nengliang:{
                    width:30,
                    height:15,
                    font:16,
                    color:'#FF7D29'
                },
                shui:{
                    width:20,
                    height:10,
                    font:11,
                },
                dian:{
                    width:20,
                    height:10,
                    font:11,
                },
                qi:{
                    width:20,
                    height:10,
                    font:11,
                }
            })
        }
        else if(entry.x == 1){
            this.setState({
                nengliang:{
                    width:20,
                    height:10,
                    font:11,
                },
                shui:{
                    width:30,
                    height:15,
                    font:16,
                    color:'#030D4B'
                },
                dian:{
                    width:20,
                    height:10,
                    font:11,
                },
                qi:{
                    width:20,
                    height:10,
                    font:11,
                }
            })
        }
        else if(entry.x == 2){
            this.setState({
                nengliang:{
                    width:20,
                    height:10,
                    font:11,
                },
                shui:{
                    width:20,
                    height:10,
                    font:11,
                },
                dian:{
                    width:30,
                    height:15,
                    font:16,
                    color:'yellow'
                },
                qi:{
                    width:20,
                    height:10,
                    font:11,
                }
            })
        }
        else if(entry.x == 3){
            this.setState({
                nengliang:{
                    width:20,
                    height:10,
                    font:11,
                },
                shui:{
                    width:20,
                    height:10,
                    font:11,
                },
                dian:{
                    width:20,
                    height:10,
                    font:11,
                },
                qi:{
                    width:30,
                    height:15,
                    font:16,
                    color:'red'
                }
            })
        }
        else{
            this.setState({
                nengliang:{
                    width:20,
                    height:10,
                    font:11,
                },
                shui:{
                    width:20,
                    height:10,
                    font:11,
                },
                dian:{
                    width:20,
                    height:10,
                    font:11,
                },
                qi:{
                    width:20,
                    height:10,
                    font:11,
                }
            })
        }
    }
    pieHandleSelect(event) {
        let entry = event.nativeEvent;
        if(entry.label == 'nengliang'){
            this.setState({
                pieNengliang:{
                    width:20,
                    height:20,
                    font:16,
                    color:'#FF7D29'
                },
                pieShui:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieDian:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieQi:{
                    width:15,
                    height:15,
                    font:11,
                }
            })
        }
        else if(entry.label == 'shui'){
            this.setState({
                pieNengliang:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieShui:{
                    width:20,
                    height:20,
                    font:16,
                    color:'#030D4B'
                },
                pieDian:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieQi:{
                    width:15,
                    height:15,
                    font:11,
                }
            })
        }
        else if(entry.label == 'dian'){
            this.setState({
                pieNengliang:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieShui:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieDian:{
                    width:20,
                    height:20,
                    font:16,
                    color:'yellow'
                },
                pieQi:{
                    width:15,
                    height:15,
                    font:11,
                }
            })
        }
        else if(entry.label == 'qi'){
            this.setState({
                pieNengliang:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieShui:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieDian:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieQi:{
                    width:20,
                    height:20,
                    font:16,
                    color:'red'
                }
            })
        }
        else{
            this.setState({
                pieNengliang:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieShui:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieDian:{
                    width:15,
                    height:15,
                    font:11,
                },
                pieQi:{
                    width:15,
                    height:15,
                    font:11,
                }
            })
        }
    }
    render() {
        const {navigate} = this.props.navigation;
        return (
            <ScrollView>
                <Image style={styles.backImage} source={require('../images/backImage.png')}>
                       <View style={{height:60,width:winWidth,alignItems:'center',justifyContent:'center'}}>
                           <Text style={{fontSize:22,color:'white'}}>IZAR@APP</Text>
                       </View>
                        <Carousel/>
                </Image>
                <View style={styles.allBtnView}>
                    <View style={styles.btnListView}>
                        <TouchableHighlight style={styles.touchable} underlayColor={'#F2F2F2'} onPress={()=>navigate('ImagePickerScreen')}>
                            <View style={styles.btnView}>
                                <Image style={styles.btn} source={require('../images/btn1.png')}/>
                                <Text style={styles.btnText}>计量数据</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight style={styles.touchable} underlayColor={'#F2F2F2'} onPress={()=>navigate('Test',{title:'消耗统计'})}>
                            <View style={styles.btnView}>
                                <Image style={styles.btn} source={require('../images/btn2.png')}/>
                                <Text style={styles.btnText}>消耗统计</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight style={styles.touchable} underlayColor={'#F2F2F2'} onPress={()=>navigate('Test',{title:'电子账单'})}>
                            <View style={styles.btnView}>
                                <Image style={styles.btn} source={require('../images/btn3.png')}/>
                                <Text style={styles.btnText}>电子账单</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight style={styles.touchable} underlayColor={'#F2F2F2'} onPress={()=>navigate('Test',{title:'在线报修'})}>
                            <View style={styles.btnView}>
                                <Image style={styles.btn} source={require('../images/btn4.png')}/>
                                <Text style={styles.btnText}>在线报修</Text>
                            </View>
                        </TouchableHighlight>
                    </View>
                    <View style={styles.btnListView}>
                        <TouchableHighlight style={styles.touchable} underlayColor={'#F2F2F2'} onPress={()=>navigate('Test',{title:'手动抄表'})}>
                            <View style={styles.btnView}>
                                <Image style={styles.btn} source={require('../images/btn5.png')}/>
                                <Text style={styles.btnText}>手动抄表</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight style={styles.touchable} underlayColor={'#F2F2F2'} onPress={()=>navigate('Test',{title:'远程控温'})}>
                            <View style={styles.btnView}>
                                <Image style={styles.btn} source={require('../images/btn6.png')}/>
                                <Text style={styles.btnText}>远程控温</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight style={styles.touchable} underlayColor={'#F2F2F2'} onPress={()=>navigate('Test',{title:'在线客服'})}>
                            <View style={styles.btnView}>
                                <Image style={styles.btn} source={require('../images/btn7.png')}/>
                                <Text style={styles.btnText}>在线客服</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight style={styles.touchable} underlayColor={'#F2F2F2'} onPress={()=>navigate('Test',{title:'通知消息'})}>
                            <View style={styles.btnView}>
                                <Image style={styles.btn} source={require('../images/btn8.png')}/>
                                <Text style={styles.btnText}>通知消息</Text>
                            </View>
                        </TouchableHighlight>
                    </View>
                </View>
                <View style={styles.tabView}>
                    <View style={styles.tabTitleView}>
                        <Image style={styles.tabTitleImage} source={require('../images/tabTitle1.png')}/>
                        <View>
                            <Text>消耗助手</Text>
                            <Text>上午&nbsp;&nbsp;11:32</Text>
                        </View>
                    </View>
                    <View style={styles.tabContent}>
                        <View style={styles.tabContentLeft}>
                            <View style={styles.tabContentLeftTop}>
                                <Text style={styles.tabContentLeftTopText1}>711.23kWh</Text>
                                <Text style={styles.tabContentLeftTopText2}>7月消耗</Text>
                            </View>
                            <View style={styles.tabContentLeftBottom}>
                                <View style={styles.tabContentLeftBottomRow}>
                                    <View style={{width:this.state.nengliang.width,height:this.state.nengliang.height,backgroundColor:'#FF7D29',marginRight:15}}></View><Text style={{fontSize:this.state.nengliang.font,color:this.state.nengliang.color}}>能量</Text>
                                </View>
                                <View style={styles.tabContentLeftBottomRow}>
                                    <View style={{width:this.state.shui.width,height:this.state.shui.height,backgroundColor:'#030D4B',marginRight:15}}></View><Text style={{fontSize:this.state.shui.font,color:this.state.shui.color}}>水</Text>
                                </View>
                                <View style={styles.tabContentLeftBottomRow}>
                                    <View style={{width:this.state.dian.width,height:this.state.dian.height,backgroundColor:'yellow',marginRight:15}}></View><Text style={{fontSize:this.state.dian.font,color:this.state.dian.color}}>电</Text>
                                </View>
                                <View style={styles.tabContentLeftBottomRow}>
                                    <View style={{width:this.state.qi.width,height:this.state.qi.height,backgroundColor:'red',marginRight:15}}></View><Text style={{fontSize:this.state.qi.font,color:this.state.qi.color}}>气</Text>
                                </View>
                            </View>
                        </View>
                        <View style={styles.tabContentRight}>
                            <View style={{flex: 1}}>

                                {/* <View style={{height:80}}>
                                 <Text> selected entry</Text>
                                 <Text> {this.state.selectedEntry}</Text>
                                 </View>*/}
                                <View style={styles.container}>
                                    <BarChart
                                        style={styles.chart}
                                        data={this.state.data}
                                        xAxis={this.state.xAxis}
                                        yAxis={this.state.yAxis}
                                        animation={{durationX: 2000, durationY: 2000}}
                                        chartDescription={this.state.description}
                                        legend={this.state.legend}
                                        gridBackgroundColor={processColor('#ffffff')}
                                        drawBarShadow={false}
                                        drawValueAboveBar={true}
                                        drawHighlightArrow={true}
                                        doubleTapToZoomEnabled={false}
                                        scaleEnabled={false}
                                        onSelect={this.handleSelect.bind(this)}
                                    />
                                </View>
                            </View>
                        </View>
                    </View>
                   <TouchableHighlight onPress={()=>navigate('Test',{title:'查看更多'})}>
                       <View style={styles.tabMoreView}>
                           <Text>查看更多</Text>
                       </View>
                   </TouchableHighlight>
                </View>
                <View style={styles.tabView}>
                    <View style={styles.tabTitleView}>
                        <Image style={styles.tabTitleImage} source={require('../images/tabTitle2.png')}/>
                        <View>
                            <Text>账单助手</Text>
                            <Text>上午&nbsp;&nbsp;11:32</Text>
                        </View>
                    </View>
                    <View style={styles.tabContent}>
                        <View style={styles.tabContentLeft}>
                            <View style={styles.tabContentLeftTop}>
                                <Text style={styles.tabContentLeftTopText1}>￥1865.68</Text>
                                <Text style={styles.tabContentLeftTopText2}>7月账单</Text>
                            </View>
                            <View style={styles.tabContentLeftBottom}>
                                <View style={styles.tabContentLeftBottomRow}>
                                    <Image style={{height:this.state.pieNengliang.height,width:this.state.pieNengliang.width,marginRight:15}}
                                           source={require('../images/nengliang.png')}/><Text style={{marginRight:15,fontSize:this.state.pieNengliang.font,color:this.state.pieNengliang.color}}>能量</Text><Text style={{fontSize:this.state.pieNengliang.font,color:this.state.pieNengliang.color}}>123</Text>
                                </View>
                                <View style={styles.tabContentLeftBottomRow}>
                                    <Image style={{height:this.state.pieShui.height,width:this.state.pieShui.width,marginRight:15}}
                                           source={require('../images/shui.png')}/><Text style={{marginRight:15,fontSize:this.state.pieShui.font,color:this.state.pieShui.color}}>水</Text><Text style={{fontSize:this.state.pieShui.font,color:this.state.pieShui.color}}>123</Text>
                                </View>
                                <View style={styles.tabContentLeftBottomRow}>
                                    <Image style={{height:this.state.pieDian.height,width:this.state.pieDian.width,marginRight:15}}
                                           source={require('../images/dian.png')}/><Text style={{marginRight:15,fontSize:this.state.pieDian.font,color:this.state.pieDian.color}}>电</Text><Text style={{fontSize:this.state.pieDian.font,color:this.state.pieDian.color}}>123</Text>
                                </View>
                                <View style={styles.tabContentLeftBottomRow}>
                                    <Image style={{height:this.state.pieQi.height,width:this.state.pieQi.width,marginRight:15}}
                                           source={require('../images/qi.png')}/><Text style={{marginRight:15,fontSize:this.state.pieQi.font,color:this.state.pieQi.color}}>气</Text><Text style={{fontSize:this.state.pieQi.font,color:this.state.pieQi.color}}>123</Text>
                                </View>
                            </View>
                        </View>
                        <View style={styles.tabContentRight}>
                            <View style={{flex: 1}}>

                                <View style={styles.container}>
                                    <PieChart
                                        style={styles.chart}
                                        animation={{durationX: 2000, durationY: 2000}}
                                        logEnabled={true}
                                        chartBackgroundColor={processColor('white')}
                                        chartDescription={this.state.pieDescription}
                                        data={this.state.pieData}
                                        legend={this.state.pieLegend}
                                        drawEntryLabels = {false}
                                        entryLabelColor = {processColor('black')}
                                        entryLabelTextSize = {20}
                                        rotationEnabled={true}
                                        drawSliceText={true}
                                        usePercentValues={false}
                                        holeRadius={0}
                                        holeColor={processColor('red')}
                                        transparentCircleRadius={0}
                                        transparentCircleColor={processColor('#f0f0f088')}
                                        maxAngle={360}
                                        onSelect={this.pieHandleSelect.bind(this)}
                                    />
                                </View>

                            </View>
                        </View>
                    </View>
                    <TouchableHighlight onPress={()=>navigate('Test',{title:'查看更多'})}>
                        <View style={styles.tabMoreView}>
                            <Text>查看更多</Text>
                        </View>
                    </TouchableHighlight>
                </View>
                <View style={styles.noticeTab}>
                    <View style={styles.tabTitleView}>
                        <Image style={styles.tabTitleImage} source={require('../images/tabTitle3.png')}/>
                        <View>
                            <Text>泄露预警</Text>
                            <Text>上午&nbsp;&nbsp;11:32</Text>
                        </View>
                    </View>
                    <View style={styles.tabContentLeft}>
                        <View style={styles.tabContentLeftTop}>
                            <Text style={styles.tabContentLeftTopText1}>8.68 </Text>
                            <Text style={styles.tabContentLeftTopText2}>泄漏量</Text>
                        </View>
                    </View>
                    <TouchableHighlight onPress={()=>navigate('Test',{title:'查看更多'})}>
                        <View style={styles.tabMoreView}>
                            <Text>查看更多</Text>
                        </View>
                    </TouchableHighlight>
                </View>
                <View style={styles.noticeTab}>
                    <View style={styles.tabTitleView}>
                        <Image style={styles.tabTitleImage} source={require('../images/tabTitle4.png')}/>
                        <View>
                            <Text>欠费预警</Text>
                            <Text>上午&nbsp;&nbsp;11:32</Text>
                        </View>
                    </View>
                    <View style={styles.tabContentLeft}>
                        <View style={styles.tabContentLeftTop}>
                            <Text style={styles.tabContentLeftTopText1}>￥1888.66 </Text>
                            <Text style={styles.tabContentLeftTopText2}>需付账单</Text>
                        </View>
                    </View>
                    <TouchableHighlight onPress={()=>navigate('Test',{title:'查看更多'})}>
                        <View style={styles.tabMoreView}>
                            <Text>查看更多</Text>
                        </View>
                    </TouchableHighlight>
                </View>
                <View style={styles.noticeTab}>
                    <View style={styles.tabTitleView}>
                        <Image style={styles.tabTitleImage} source={require('../images/tabTitle5.png')}/>
                        <View>
                            <Text>停水通知</Text>
                            <Text>上午&nbsp;&nbsp;11:32</Text>
                        </View>
                    </View>
                    <View style={styles.tabContentLeft}>
                        <View style={styles.tabContentLeftTop}>
                            <Text style={styles.tabContentLeftTopText1}>我司因管道升级，将于8月14日晚上暂停供水 </Text>
                            <Text style={styles.tabContentLeftTopText2}>系统消息</Text>
                        </View>
                    </View>
                    <TouchableHighlight onPress={()=>navigate('Test',{title:'查看更多'})}>
                        <View style={styles.tabMoreView}>
                            <Text>查看更多</Text>
                        </View>
                    </TouchableHighlight>
                </View>
            </ScrollView>
        )
    }

}

const styles = StyleSheet.create({
    backImage: {
        width: winWidth,
        height: 0.94 * winWidth,
    },
    allBtnView: {
        backgroundColor: 'white',
        alignItems: 'center',
    },
    btnListView: {
        flexDirection: 'row',
        //  justifyContent: 'space-between',
        alignItems: 'center',

    },
    touchable:{
        flex: 1,
    },
    btnView: {
        justifyContent: 'space-between',
        alignItems: 'center',
        padding:10,
    },
    btn: {
        height: 40,
        width: 40
    },
    btnText: {
        marginTop: 10,
        fontSize: 15
    },
    tabView: {
        paddingTop: 10,
        marginTop: 10,
        width: winWidth,
        backgroundColor: 'white'
    },
    tabTitleView: {
        marginBottom: 10,
        flexDirection: 'row',

    },
    tabTitleImage: {
        marginLeft: 10,
        marginRight: 10,
        width: 35,
        height: 35
    },
    tabContent: {
        flexDirection: 'row'
    },
    tabContentLeft: {
        flex: 3,
        paddingLeft: winWidth * 0.125,
    },
    tabContentLeftTop: {
        alignItems: 'flex-start',
        marginBottom: 30,
    },
    tabContentLeftTopText1: {
        fontSize: 23,
    },
    tabContentLeftTopText2: {
        fontSize: 18,
    },
    tabContentLeftBottom: {
        alignItems: 'flex-start',
        marginBottom: 30,
    },
    tabContentLeftBottomRow: {
        marginTop: 5,
        width: winWidth * 0.25,
        flexDirection: 'row',
        alignItems: 'center',
    },
    tabContentRight: {
        flex: 4,
        paddingBottom: 15,
    },
    tabMoreView: {
        paddingTop: 10,
        paddingBottom: 10,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#F2F2F2'
    },
    noticeTab: {
        marginTop: 10,
        paddingTop: 10,
        backgroundColor: 'white',
        width: winWidth,
    },
    container: {
        flex: 1,
        //backgroundColor: '#F5FCFF'
    },
    chart: {
        width: 200,
        height: 200,
    }
});
